<template>
  <div>
    <cube-page :title="title" />

    <div class="view-wrapper">
      <cube-sticky
        :pos="scrollY"
        :check-top="checkTop"
        fixed-show-ani="sticky-fixed-show"
      >
        <cube-scroll
          ref="scroll"
          :scroll-events="['scroll']"
          :options="options"
          @scroll="onScrollHandle"
          @pulling-down="onPullingDown"
          @pulling-up="onPullingUp"
          nest-mode="native"
        >
          <ul v-for="(item, index) in noticeList" :key="index">
            <li class="mineitem">
              <router-link
                :to="{ path: '/noticeinfo', query: { notice: item } }"
              >
                <div class="content">
                  <span class="title">{{ item.title }}</span>
                  <span class="time">{{
                    item.createTime | dateFormat("yyyy-MM-dd")
                  }}</span>
                </div>
                <i class="cubeic-arrow"></i>
              </router-link>
            </li>
          </ul>

          <template slot="pulldown" slot-scope="props">
            <div
              v-if="props.pullDownRefresh"
              class="cube-pulldown-wrapper"
              :style="pullDownStyle"
            >
              <div class="pulldown-content">
                <span v-if="props.beforePullDown">{{ pullDownTip }}</span>
                <template v-else>
                  <span v-if="props.isPullingDown">正在更新...</span>
                  <span v-else>更新成功</span>
                </template>
              </div>
            </div>
          </template>
        </cube-scroll>
      </cube-sticky>
    </div>
  </div>
</template>

<script>
import CubePage from "../components/cube-page.vue";
import { getNoticeList } from "../api/school";

export default {
  components: {
    CubePage
  },
  data() {
    return {
      title: "教务公告",
      scrollY: 0,
      checkTop: true,
      noticeList: [],
      pageIndex: 1,
      pageSize: 10,
      options: {
        pullDownRefresh: {
          threshold: 40,
          stop: 40,
          txt: "更新成功"
        },
        pullUpLoad: true
      },
      pullDownTip: this.getPullDownTip(),
      pullDownStyle: "top:-30px"
    };
  },
  mounted() {
    this.refreshData();
  },
  methods: {
    onScrollHandle(pos) {
      this.pullDownY = pos.y;
      this.pullDownTip = this.getPullDownTip();
      if (pos.y > 0) {
        this.pullDownStyle = `top:${pos.y - 20}px`;
        this.triggerSurpriseFlag = false;
        if (this.pullDownY >= this.options.pullDownRefresh.threshold) {
          this.triggerSurpriseFlag = true;
        }
      }
    },
    onPullingDown() {
      if (this.triggerSurpriseFlag) {
        this.triggerSurprise = true;
        this.refreshData();
        return;
      }
      setTimeout(() => {
        this.pullFinish();
      }, 1000);
    },
    onPullingUp() {
      setTimeout(() => {
        this.loadMoreData();
      }, 1000);
    },
    pullFinish() {
      this.$refs.scroll.forceUpdate();
    },
    getPullDownTip() {
      if (
        this.options &&
        this.pullDownY <= this.options.pullDownRefresh.threshold
      ) {
        return "下拉刷新";
      } else {
        return "释放刷新";
      }
    },
    refreshData() {
      this.pageIndex = 1;
      getNoticeList(this.pageIndex, this.pageSize)
        .then(response => {
          console.log(response);
          this.noticeList = response.data;
          this.pullFinish();
        })
        .catch(error => {
          console.log(error);
          this.$toastErrorCode(error);
        });
    },
    loadMoreData() {
      let pageIndex = this.pageIndex + 1;
      getNoticeList(pageIndex, this.pageSize)
        .then(response => {
          this.pageIndex = pageIndex;
          console.log(response);
          response.data.forEach(item => {
            this.noticeList.push(item);
          });
          this.pullFinish();
        })
        .catch(error => {
          console.log(error);
          this.$toastErrorCode(error);
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
.view-wrapper {
  position: fixed;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 100%;

  .index-list-wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}

.mineitem {
  font-size: 14px;
  text-align: left;
  height: 60px;
  border-bottom: 1px solid #eee;

  .content {
    padding-left: 5%;
    display: inline-grid;
    width: 78%;
    height: 50px;
    margin-top: 10px;
  }

  .title {
    color: #000;
    line-height: 14px;
  }

  .time {
    font-size: 12px;
    line-height: 12px;
    color: #666;
  }

  i {
    margin-top: 22px;
    position: absolute;
    right: 10px;
  }
}

.pulldown-content {
  font-size: 14px;
}
</style>
